<template>
  <div class="oe-role-management" v-loading="loading">
    <topTip :showBack="false"></topTip>
    <div class="role-list-top clearfix">
      <!-- <span>角色名称：</span> -->
      <span class="oe-role-input">
        <a-input v-model="name" placeholder="请输入角色名称" >
           <template #prefix>
            <span class="iconfont icon-sousuo"></span>
          </template>
        </a-input>
        <a-button class="chaxun" type="primary" @click="getList" >查询</a-button>
      </span>
      <a-button class="top-right fr" type="primary" @click="getAddUse" v-if="operationList.includes('add/edit/del')"
        >新增</a-button
      >
      <a-button class="top-right oe-btn-delete fr" @click="getDelRole" v-if="operationList.includes('add/edit/del')"
        >删除</a-button
      >
      <!-- <a-button class="top-right" type="primary" @click="menuRole" v-if="operationList.includes('add/edit/del')"
          >菜单角色管理</a-button
        > -->
    </div>
    <div class="role-management-list">
      <div class="role-list-table">
        <a-table
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :dataSource="data"
          :pagination="pagination"
        >
          <template slot="operation" slot-scope="text, record">
            <span>
              <a @click="setUse(record)" v-if="record.IsFirst == '否' && operationList.includes('add/edit/del')"
                >编辑</a
              >
              <a-divider type="vertical" />
              <a @click="getMem(record)" v-if="operationList.includes('add/edit/del:member')">成员管理</a>
              <a-divider type="vertical" />
              <a @click="getCarte(record)" v-if="operationList.includes('add/edit/del:menu')">权限管理</a>
            </span>
          </template>
        </a-table>
      </div>
    </div>
    <a-modal title="新增角色" wrapClassName="role-add-modal" v-model="visible" @cancel="handleCancel" @ok="handleOk">
      <div class="role-modal-content">
        <span class="role-modal-span">角色名称：</span>
        <a-input v-model="addName" style="width: calc(100% - 100px)" placeholder="请输入角色名称" />
      </div>
      <div class="role-modal-content">
        <span class="role-modal-span">备注：</span>
        <a-textarea
          v-model="addContent"
          style="width: calc(100% - 100px)"
          placeholder="请输入备注"
          :autoSize="{ minRows: 3, maxRows: 5 }"
        />
      </div>
    </a-modal>
  </div>
</template>

<script>
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  components: {
    topTip,
  },
  mixins: [GetOperationList],
  data() {
    return {
      name: '',
      pagination: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          this.getList();
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          this.getList();
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0,
      },
      data: [],
      columns: [
        { title: '序号', dataIndex: 'number', width: '7%', align: 'center'},
        { title: '角色名称', dataIndex: 'RoleName', width: '14%', align: 'center' },
        { title: '是否系统创建', dataIndex: 'IsFirst', width: '9%', align: 'center' },
        { title: '创建时间', dataIndex: 'DateCreated', width: '20%', align: 'center' },
        { title: '备注', dataIndex: 'Remark', ellipsis: true, width: '20%', align: 'center' },
        { title: '操作', dataIndex: 'operation', width: '15%', scopedSlots: { customRender: 'operation' }, align: 'center' },
      ],
      selectedRowKeys: [],
      loading: false,
      visible: false,
      setId: '',
      addName: '',
      addContent: '',
      // 操作List
      operationList: [],
      // 、操作list
      IsOpList: [],
    };
  },
  computed: {},
  mounted() {
    this.getOpeartion();
  },
  methods: {
    // 获取页面操作
    getOpeartion() {
      this.loading = true;
      this.GetOperationList().then((rst) => {
        this.loading = false;
        this.operationList = [];
        this.IsOpList = [];
        if (rst.code === 1) {
          if (rst.list.length) {
            rst.list.forEach((item) => {
              if (item.IsWrite || item.Name == 'add/edit/del:member' || item.Name == 'add/edit/del:menu') {
                this.operationList.push(item.Name);
              }
            });
            this.IsOpList = rst.list;
          }
          this.getList();
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    // 判断是否是只读
    getIsWrite(type) {
      let index = this.IsOpList.findIndex((el) => {
        return el.Name === type;
      });
      if (index > -1) {
        if (!this.IsOpList[index].IsRead && !this.IsOpList[index].IsWrite) {
          this.$message.info('您没有该操作权限！');
          return false;
        } else {
          return true;
        }
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
    },
    getMem(data) {
      localStorage.setItem('RoleName', data.RoleName);
      localStorage.setItem('RoleId', data.Id);
      if (!this.getIsWrite('add/edit/del:member')) {
        return;
      }
      this.$router.push({
        name: 'memManagement',
        params: {
          roleId: data.Id,
        },
      });
    },
    getCarte(data) {
      localStorage.setItem('RoleName', data.RoleName);
      localStorage.setItem('RoleId', data.Id);
      if (!this.getIsWrite('add/edit/del:menu')) {
        return;
      }
      this.$router.push({
        name: 'carteManagement',
        params: {
          roleId: data.Id,
        },
      });
    },
    getAddUse(data) {
      if (!this.getIsWrite('add/edit/del')) {
        return;
      }
      this.visible = true;
    },
    setUse(data) {
      if (!this.getIsWrite('add/edit/del')) {
        return;
      }
      this.setId = data.Id;
      this.addName = data.RoleName;
      this.addContent = data.Remark;
      this.visible = true;
    },
    handleCancel(e) {
      this.setId = '';
      this.addName = '';
      this.addContent = '';
      this.visible = false;
    },
    handleOk() {
      this.loading = true;
      this.$http
        .post('/api/schoolManager/rolemenu/edit', {
          id: this.setId, //角色id
          roleName: this.addName, //角色名称
          remark: this.addContent, //备注
        })
        .then((res) => {
          this.loading = false;

          if (res.code > 0) {
            this.$message.success(res.msg);
            this.getList();
            this.handleCancel();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    getList() {
      this.loading = true;
      this.$http
        .post('/api/schoolManager/rolemenu/getList', {
          pageSize: this.pagination.pageSize,
          page: this.pagination.current,
          roleName: this.name,
        })
        .then((res) => {
          this.loading = false;
          this.data = [];
          this.pagination.total = res.pagination.totalCount;
          // for (let i = 0; i < res.list.length; i++) {
          //   this.data[i].key = i + 1;
          // }
          if (res.list.length) {
            res.list.forEach((item, index) => {
              let number = (res.pagination.pageIndex - 1) * res.pagination.pageSize + index + 1;
              this.data.push({
                ...item,
                key: item.Id,
                number: number,
              });
            });
          }
        });
    },
    getDelRole() {
      if (!this.getIsWrite('add/edit/del')) {
        return;
      }
      this.loading = true;
      this.$http
        .post('/api/schoolManager/rolemenu/delRole', {
          ids: this.selectedRowKeys,
        })
        .then((res) => {
          this.loading = false;
          if (res.code > 0) {
            this.$message.success(res.msg);
            this.getList();
            this.selectedRowKeys = [];
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    menuRole() {
      this.$router.push({
        name: 'menuRole',
      });
    },
  },
};
</script>
